<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            position: relative;
            top: 100px;
            left: 5px;
            text-align: center;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="div">1</div>
    <script>
        let div = document.getElementById("div");
        console.log(div);
        // let div1 = document.createElement("div");

        for (let i = 1; i <= 6; i++) {
            // let div1 = div.cloneNode(true);
            document.body.append(div.cloneNode(true));
            // let div2 = document.getElementsByTagName("div")[i];
            document.getElementsByTagName("div")[i].style.left = (5 + 20 * i) + "px";
            document.getElementsByTagName("div")[i].innerHTML = (i + 1);
            // console.log(div2);
        }
        for (let j = 7; j <= 14; j++) {
            document.body.append(div.cloneNode(true));
            document.getElementsByTagName("div")[j].style.left = (20 * j + 5) + "px";
            document.getElementsByTagName("div")[j].style.top = (60 - 40 * (j - 7)) + "px";
            document.getElementsByTagName("div")[j].innerHTML = (j + 1);
        }
        for (let k = 15; k <= 22; k++) {
            document.body.append(div.cloneNode(true));
            document.getElementsByTagName("div")[k].style.left = (20 * k + 5) + "px";
            document.getElementsByTagName("div")[k].style.top = "-220px";
            document.getElementsByTagName("div")[k].innerHTML = (k + 1);
        }
        for (let z = 23; z <= 30; z++) {
            document.body.append(div.cloneNode(true));
            document.getElementsByTagName("div")[z].style.left = (20 * z + 5) + "px";
            document.getElementsByTagName("div")[z].style.top = (-260 - 40 * (z - 23)) + "px";
            document.getElementsByTagName("div")[z].innerHTML = (z + 1);
        }

        // document.body.append(div.cloneNode(true));
        // document.getElementsByTagName("div")[31].style.left = "625px";
        // document.getElementsByTagName("div")[31].style.top = "-540px";
        // document.body.append(div.cloneNode(true));
        // document.getElementsByTagName("div")[32].style.left = "645px";
        // document.getElementsByTagName("div")[32].style.top = "-540px";
        // console.log(document.getElementsByTagName("div"));
        for (let z = 31; z <= 38; z++) {
            document.body.append(div.cloneNode(true));
            document.getElementsByTagName("div")[z].style.left = (20 * z + 5) + "px";
            document.getElementsByTagName("div")[z].style.top = "-540px";
            document.getElementsByTagName("div")[z].innerHTML = (z + 1);
        }
    </script>
</body>

</html>